@import 'colors';
@import 'trp3Vars';
@import 'typography';
@import 'base-web';
@import 'base-left-menu';

@import 'logo';
@import 'buttons';
@import 'components/room-card';
@import 'components/primary-branded-header';
@import 'components/header-info-bar';
@import 'components/pills';

@import '../js/views/modals/login-view';
@import '../js/views/profile-menu/profile-menu-view';

@page-bg-color: #ffffff;

@explore-breakpoint-small: ~'(max-width: 550px)';

@page-wrapper-max-width: 140rem;
@page-wrapper-horizontal-padding: 2rem;

@explore-header-mobile-icon-size: 72px;

// if you change this, make sure to change the image url "s" param.
// it has to be double to support retina displays.
@AVATAR_SIZE: 4 * 0.625em; // @const

@section-spacing: 2rem;

.generic-page-section {
  max-width: @page-wrapper-max-width;
  margin-left: auto;
  margin-right: auto;
  padding-left: @page-wrapper-horizontal-padding;
  padding-right: @page-wrapper-horizontal-padding;
}

html {
  box-sizing: border-box;
  height: 100%;
}

body {
  overflow: hidden;
  height: 100%;
  margin: 0;
  background-color: @page-bg-color;
  max-width: 100vw;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.explore-page-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.explore-primary-header-innner {
  .generic-page-section();
}

.explore-primary-header__sub-header {
  @media @explore-breakpoint-small {
    margin-left: 2rem;
    font-size: 1.8rem;
  }

  @media (max-width: 370px) {
    display: none;
  }
}

.explore-primary-header__action-area {
  & > * + * {
    margin-left: 8px;
  }

  @media (max-width: 760px) {
    display: none;
  }
}

.explore-header {
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  height: @desktop-header-height;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  padding-left: @page-wrapper-horizontal-padding;
  padding-right: @page-wrapper-horizontal-padding;

  background-image: linear-gradient(to left, @header-grad-bg-color, @header-base-bg-color);
}

.explore-header__heading {
  margin: 0;
  color: white;
  font-weight: 300;
  font-size: 24px;
}

.explore-main {
  overflow: auto;
  // https://github.com/html-next/ember-gestures/issues/104
  touch-action: pan-y;
  flex: 1;
}

.explore-header-section {
  .generic-page-section();

  width: 100%;
  margin-top: @section-spacing;
  padding-top: 85px;
  margin-bottom: 10px;

  @media @explore-breakpoint-small {
    margin-top: @section-spacing / 2;
  }
}

.explore-secondary-header-info-bar {
  margin-bottom: @section-spacing;

  @media @explore-breakpoint-small {
    display: none;
  }
}

.explore-header-info-bar__mobile-group {
  diplay: flex;
  flex-wrap: nowrap;
}

.explore-header-info-bar__mobile-diagram {
  @explore-header-mobile-icon-size: 72px;

  z-index: 1;
  display: inline-block;
  vertical-align: middle;
  width: 1ch;

  color: fade(@light, 75%);
  font-size: @explore-header-mobile-icon-size;
  line-height: 1rem;

  pointer-events: none;

  @media (max-width: 600px) {
    display: none;
  }
}

.explore-header-info-bar__mobile-icon {
  position: relative;
  transform: translateX(-33%);
  display: inline-block;

  &,
  &:before {
    line-height: inherit;
  }

  &:after {
    content: '';
    z-index: -1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);

    width: 1ch;
    width: calc(1ch ~'-' 8px);
    height: @explore-header-mobile-icon-size;

    background-color: @page-bg-color;
  }
}

.explore-header-info-bar__mobile-item {
  .secondary-header-info-bar__item();

  margin-left: 0.5em;
  margin-right: 0.5em;
}

.explore-tag-pill-list {
  margin-top: @section-spacing;
  margin-bottom: @section-spacing;

  @media @explore-breakpoint-small {
    margin-top: @section-spacing / 2;
    margin-bottom: @section-spacing / 2;
  }
}

.explore-pill-list-section {
  .generic-page-section();
}

.explore-pill-list-section__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 1rem;
}

.explore-pill-list-section__header-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: #bcbcbc;
}

.explore-pill-list-section__header-secondary-action-annotation {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-right: 1.5rem;
}

@media-tag-list-large: 1300px;
@media-tag-list-medium: 1100px;
@media-tag-list-small: 700px;

// `postcss-reverse-media` would be nice here: https://github.com/MadLittleMods/postcss-reverse-media
@media (min-width: (@media-tag-list-large + 0.001)) {
  .tag-pill-list(2, 8);
}

@media (max-width: @media-tag-list-large) and (min-width: (@media-tag-list-medium + 0.001)) {
  .tag-pill-list(2, 6);
}

@media (max-width: @media-tag-list-medium) and (min-width: (@media-tag-list-small + 0.001)) {
  .tag-pill-list(2, 4);
}

@media (max-width: @media-tag-list-small) {
  .tag-pill-list(2, 2);
}

.explore-room-card-list-section {
  @list-padding: calc(@section-spacing - @room-card-list-spacing);

  flex: 1;
  padding-top: @list-padding;
  padding-bottom: @list-padding;

  background-color: @menu-border-color;
}

.explore-room-card-list {
  .generic-page-section();
  .room-card-list();

  @side-padding: calc(@page-wrapper-horizontal-padding - @room-card-list-spacing);
}
